<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="优惠券编号/名称" >
              <br> <br>
                <el-input v-model="formInline.couponName" placeholder="优惠券编号/名称" style="margin-left:-100px;width:200px"></el-input>
            </el-form-item>
            <el-form-item label="优惠券状态" style="margin-left:20px;">
                <br> <br>
                <el-radio-group v-model="formInline.status" style="margin-left:-80px;">
                    <el-radio-button label>全部</el-radio-button>
                    <el-radio-button label="1">启用</el-radio-button>
                    <el-radio-button label="0">停用</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item style="margin-left:700px;text-align:right">
                <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
            <!-- </el-form-item>
            <el-form-item> -->
                <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
            <!-- </el-form-item>
            <el-form-item> -->
                <el-button type="primary" @click="toAdd()" icon="el-icon-edit" size="mini">创建优惠券</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            v-loading="loading"
            border
            style="width: 100%;"
            :header-cell-style="{background:'#ebecf0',color:'#606266'}"
        >
            <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
            <el-table-column prop="couponSeq" label="优惠券编号" header-align="center" width="150"></el-table-column>
            <el-table-column prop="couponName" label="优惠券名称" header-align="center" width="220"></el-table-column>
            <el-table-column prop="couponMoney" label="优惠券面值" header-align="center" width="160">
                <template slot-scope="scope">
                    <span>满{{scope.row.conponLimitMoney}}减{{scope.row.couponMoney}}元</span>
                </template>
            </el-table-column>
            <!--
      <el-table-column prop="useScope" label="适用商品" align="center" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.useScope == 0">全部商品</span>
          <span v-if="scope.row.useScope == 1">
            <el-link @click="getDetail(scope.row.uuid,1)" :underline="false">指定商品</el-link>
          </span>
        </template>
      </el-table-column>
            -->
            <el-table-column label="优惠券状态" align="center" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == '1'">启用</span>
                    <span v-if="scope.row.status == '0'">停用</span>
                    <span v-if="scope.row.status == '2'">已删除</span>
                </template>
            </el-table-column>
            <el-table-column prop="comments" label="使用说明" header-align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="180"></el-table-column>
            <el-table-column
                label="操作"
                width="180"
                align="center"
                header-align="center"
                fixed="right"
            >
                <template slot-scope="scope">
                    <el-button type="text" @click="toEdit(scope.row, true)">详情</el-button>
                    <el-button
                        type="text"
                        v-if="scope.row.status == 1"
                        @click="updateStatus(scope.row, scope.row.uuid, 0)"
                    >停用</el-button>
                    <el-button
                        type="text"
                        v-if="scope.row.status == 0"
                        @click="updateStatus(scope.row, scope.row.uuid, 1)"
                    >启用</el-button>
                    <el-button
                        type="text"
                        v-if="scope.row.status == 0 && scope.row.used == 0"
                        @click="toEdit(scope.row, false)"
                    >编辑</el-button>
                    <el-button
                        type="text"
                        v-if="scope.row.status == 0 && scope.row.used == 0"
                        @click="updateStatus(scope.row, scope.row.uuid, 2)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 50, 100]"
                :current-page="listQuery.current"
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>

        <el-dialog title="适用商品" :visible.sync="dialogVisibleGood" width="55%">
            <el-table
                :data="goodsList"
                border
                style="font-size: 10px;width:100%;"
                height="300"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
                <el-table-column type="index" label="序号" align="center" ></el-table-column>
                <el-table-column prop="goodsName" label="商品名称" width="200" header-align="center"></el-table-column>
                <el-table-column prop="barCode" label="商品编码" width="180" header-align="center"></el-table-column>
                <el-table-column
                    prop="goodsTypeName"
                    label="商品分类"
                    width="180"
                    header-align="center"
                ></el-table-column>
                <el-table-column prop="salePrice" label="商品价格" header-align="center" align="right"></el-table-column>
                <el-table-column prop="unitName" label="销售单位" header-align="center"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleGood = false">关 闭</el-button>
            </span>
        </el-dialog>

        <el-dialog title="适用门店" :visible.sync="dialogVisibleShop" width="55%">
            <el-table
                :data="shopList"
                border
                style="font-size: 10px;width:100%;margin-top:-20px;"
                height="260"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
                <el-table-column type="index" label="序号" align="center" ></el-table-column>
                <el-table-column prop="storeName" label="店铺名称" width="180" header-align="center"></el-table-column>
                <el-table-column
                    prop="storeOwnerName"
                    label="店主姓名"
                    width="100"
                    header-align="center"
                ></el-table-column>
                <el-table-column prop="storeType" label="店铺类型" width="100" header-align="center">
                    <template slot-scope="scope">
                      <template v-for="item in storeType">
                        <span v-if="scope.row.storeType == item.value" :key="item.value">{{ item.label }}</span>
                      </template>
                    </template>
                </el-table-column>
                <el-table-column prop="storeAddressDetail" label="店铺地址" header-align="center"></el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleShop = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
  queryCouponList,
  updateCouponStatus,
  queryCouponById
} from "@/api/promotionProgramEdit";
import { dict } from '../../dict';

export default {
  data() {
    return {
      loading: true,
      formInline: {
        couponName: "",
        status: ""
      },
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      },
      tableData: [],
      goodsList: [],
      shopList: [],
      dialogVisibleGood: false,
      dialogVisibleShop: false
    };
  },
  computed: {
    storeType: () => dict.storeType
  },
  mounted() {
    this.couponList();
  },
  methods: {
    kong() {
      this.formInline.couponName = "";
      this.formInline.status = "";
    },
    getDetail(uuid, flag) {
      queryCouponById(uuid).then(res => {
        if (
          res.result.memberGoodsInfoDTOS != null &&
          res.result.memberGoodsInfoDTOS.length > 0
        ) {
          this.goodsList = res.result.memberGoodsInfoDTOS;
        }
        if (
          res.result.userStoreInfoDTOS != null &&
          res.result.userStoreInfoDTOS.length > 0
        ) {
          this.shopList = res.result.userStoreInfoDTOS;
        }
      });
      if (flag == 1) {
        this.dialogVisibleGood = !this.dialogVisibleGood;
      }
      if (flag == 2) {
        this.dialogVisibleShop = !this.dialogVisibleShop;
      }
    },
    getBgClass(pic) {
      if (pic == "1") {
        return " partDiv partDivBg1 partDiv-One ";
      } else if (pic == "2") {
        return " partDiv partDivBg2 partDiv-One ";
      } else {
        return " partDiv partDivBg3 partDiv-One ";
      }
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.couponList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.couponList();
    },
    indexMethod(index) {
      let curpage = this.listQuery.current; //单前页码，具体看组件取值
      let limitpage = this.listQuery.size; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },
    search() {
      this.listQuery.current = 1;
      this.couponList();
    },
    couponList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          couponType: 1,
          couponName: this.formInline.couponName,
          status: this.formInline.status
        },
        ascs: [],
        descs: []
      };
      queryCouponList(data).then(res => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    updateStatus(item, uuid, status) {
      let data = {
        uuid: uuid,
        status: status
      };
      var msg = "";
      if (status == "1") {
        msg = "启用";
      } else if (status == "0") {
        msg = "停用";
      } else if (status == "2") {
        msg = "删除";
      }
      var stopMsg = "";
      if (status == "0") {
        // 判断是否已被用于活动，是则给出提示
        var hd = "";
        if (item.promotionPlanDTOS != null && item.promotionPlanDTOS.length > 0) {
          hd = "注册有礼活动";
        }
        if (item.promotionActivityInfoDTOS != null && item.promotionActivityInfoDTOS.length > 0) {
          hd += (hd == "" ? "" : "和");
          hd += "抽奖活动";
        }
        stopMsg = (hd == "" ? "" : "该券已被用于" + hd + "，");
      }
      this.$confirm(stopMsg + "确定" + msg + "当前优惠券吗？", "提示", {
        confirmButtonText: msg,
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          updateCouponStatus(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: msg + "成功",
                type: "success"
              });
              this.couponList();
            } else {
              this.$message.error(msg + "失败");
            }
          });
        })
        .catch(() => {});
    },
    toAdd() {
      this.$router.push({
        name: "couponEdit_ty",
        params: {}
      });
    },
    toEdit(item, flag) {
      this.$router.push({
        name: "couponEdit_ty",
        params: {
          edit: item,
          disabledFlag: flag
        }
      });
    }
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
    next();
  }
};
</script>
<style lang="less" scoped>
.toptitle {
    border: 1px solid #e0e0e0;
    border-bottom: 2px solid #188097;
    background: #f5f5f5;
    line-height: 35px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
}
.el-input--small .el-input__inner {
    height: 32px;
    line-height: 32px;
}
.demo-form-inline {
    // border: 1px solid #ebeef5;
    padding: 20px 10px 0px 30px;
}

.partUl {
    overflow: hidden;
    width: 100%;
    margin-left: 0px;
    margin-top: 20px;
}
.emptyLi {
    text-align: center;
    padding-top: 100px;
    font-size: 14px;
    color: #d6d6d6;
}
.partLi {
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
}
.partDiv {
    border: 1px solid #ffcc00;
    border-radius: 10px;
    width: 250px;
    text-align: center;
}
.partDivBg1 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/images/coupon/couponBg1.png");
}
.partDivBg2 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/images/coupon/couponBg2.png");
}
.partDivBg3 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/images/coupon/couponBg3.png");
}
.partDiv0 {
    margin-top: 5px;
    text-align: right;
    float: right;
    padding-right: 5px;
    padding-top: 2px;
    background-color: transparent;
}
.partDiv1 {
    color: #fff;
    line-height: 20px;
    padding: 15px;
    padding-left: 10px;
    padding-top: 45px;
}
.partDivNum {
    color: #fff;
    line-height: 30px;
    padding: 0px;
    padding-right: 10px;
    text-align: right;
    background-color: #f27e7a;
}
.partDiv2 {
    background-color: #f9faf9;
    line-height: 30px;
    padding: 20px;
    font-size: 12px;
}
.partButton {
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background-color: transparent;
}
.partDivF {
    float: left;
    width: 5px;
    height: 5px;
    border-radius: 0px 0px 5px 0px;
}
.partDivC {
    float: left;
    width: 10px;
    height: 5px;
    border-radius: 0px 0px 5px 5px;
}
.partDivE {
    float: right;
    width: 5px;
    height: 5px;
    border-radius: 0px 0px 0px 5px;
}
.triangle {
    overflow: hidden;
    position: static;
}
.triangle-back {
    position: absolute;
    border-top: 60px solid #f44336;
    border-right: 60px solid #f27e7a;
}
.triangle-text {
    overflow: hidden;
    width: 40px;
    font-size: 12px;
    color: #fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    padding-top: 14px;
    margin-left: -5px;
}
.partDiv-One > .partDiv1 {
    background-color: #f27e7a;
}
.partDiv-One > .partDivSmall > .partDivF,
.partDiv-One > .partDivSmall > .partDivC,
.partDiv-One > .partDivSmall > .partDivE {
    background-color: #f27e7a;
}
.partDiv-One > .partDiv2 {
    background-color: #f9faf9;
    color: #f27e7a;
}
.partDiv-One .partButton {
    border: 2px solid #f27e7a;
    color: #f27e7a;
}
.partDiv-Two > .partDiv1,
.partDiv-Two > .partDivSmall > .partDivF,
.partDiv-Two > .partDivSmall > .partDivC,
.partDiv-Two > .partDivSmall > .partDivE {
    background-color: #74d3d3;
}
.partDiv-Two > .partDiv2 {
    background-color: #f9faf9;
    color: #74d3d3;
}
.partDiv-Two .partButton {
    border: 2px solid #74d3d3;
    color: #74d3d3;
}
.partDiv-Three > .partDiv1,
.partDiv-Three > .partDivSmall > .partDivF,
.partDiv-Three > .partDivSmall > .partDivC,
.partDiv-Three > .partDivSmall > .partDivE {
    background-color: #85c1e9;
}
.partDiv-Three > .partDiv2 {
    background-color: #f9faf9;
    color: #85c1e9;
}
.partDiv-Three .partButton {
    border: 2px solid #85c1e9;
    color: #85c1e9;
}
.partDiv-One > .triangle > .triangle-back {
    border-right: 60px solid #f27e7a;
}
.partDiv-Two > .triagnle > .triangle-back {
    border-right: 60px solid #74d3d3;
}
.partDiv-Three > .triagnle > .triangle-back {
    border-right: 60px solid #85c1e9;
}
</style>